﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>vue-router之路由参数默认值的设置技巧</title>
    <link href="../css/bootstrap.css"/>
    <link href="../css/bootstrap-theme.css"/>
</head>
<body>
    <h1>vue-router之路由参数默认值的设置技巧</h1><br/>

    <div id="app">
        <p>
            在某些场景下，例如分页。咱们在异步请求后台的时候，可能只是改变一个参数，这个参数叫页码。
            咱们不可能配多个路由地址，那样太繁琐了。那这个时候就可以用到路由参数了。
        </p>

        <router-link to="/com1">路由带参数的随意设置</router-link>
        <router-view></router-view>

    </div>
<script src="../js/jquery-2.2.0.min.js"></script>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/x-template" id="tem">
    <h1>
        {{$route.params.id}}
        这个是html5的模版，不用再用字符串去拼一段html代码了。
        <button @click="show">这里是子组件，只有这里才能调用show方法</button>
    </h1>
</script>
<script>

    //子组件
    const component1 = {
        template:'#tem',
        methods:{
            show(){
                console.log(this.$route.params);
            }
        }
    };

    //把定义好的组件交给路由器

    let route = new VueRouter({
        routes:[
            //设置默认参数的时候，加个正则表达式   这里的?表示有也行没有也行
            {path:'/com1/:id?',component:component1}
        ]
    });

    //根
    var app = new Vue({
        mounted(){
            //页面挂载，打开页面之前执行的操作
            this.id = this.$route.params.id;
            if(!this.id){

                this.id = 1;
                //id没有写则设置默认值
                console.log('id没有写则设置默认值'+this.id);
            }else{
                console.log('设置值'+this.id);
            }
        },
        el:'#app',
        router:route,
        data:{
            id:0
        }
    });
</script>

</body>
</html>